<!--页面 -->
<template>
	<div class="contact marginAuto">
		<div id="iscount1" v-show="!formdata.iscount">
			<div class="welcome">{{ formdata.apptxt.title }}</div>
			<div class="welcometxt" v-html="formdata.apptxt.desc"></div>
			
			<div class="btn" style="margin-top:21px;">
				<el-button class="btneachbtn mainbg" type="primary" @click="showcount">Start Immediately</el-button>
			</div>
			<div class="btn">
				<el-button class="btneachbtn" style="background-color:#D4D4D4;color:#999999;">Identity Registration</el-button>
			</div>
			<div class="cover">
				<div class="covereach" v-for="(item,index) in formdata.datas.news">
					<div class="covereachimg">
						<img src="@/assets/newimage/homecover.png" alt="" />
					</div>
					<div class="covereachtxt">
						<div class="covereachtitle marginAuto">{{ item.title }}</div>
						<div class="covereachdoc marginAuto" v-html="item.desc"></div>
					</div>
					
				</div>
			</div>
		</div>
		<div id="iscount2" v-if="formdata.iscount">
			<div class="working">
				<div class="workingtop">
					<div class="timeblock">{{formdata.timecount }}S</div>
					<el-carousel ref="carouse" :autoplay="false" arrow="never" indicator-position='none' style="height:416px;">
					    <el-carousel-item v-for="item in formdata.answerdata" :key="item" class="workingbanner">
							<div class="workingimg">
								<img style="width:100%;height:207px;" :src="item.image" alt="" />
							</div>
							<div class="workingbotom">
								<div class="workingbotom-title">{{ item.title }}</div>
								<div class="workingbotom-txt" v-html="item.desc"></div>
							</div>
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
		</div>
		<div class="from">
			<div class="from-each">
				<div class="from-eachtitle">Activation</div>
				<div class="from-eachinput">
					<el-input style="height:50px;" v-model="formdata.key"
						placeholder="Please Enter An Account"></el-input>
				</div>
			</div>
		</div>
		<div class="btn" style="margin-top:16px;">
			<el-button class="btneachbtn mainbg" type="primary" @click="bindcard">Binding card</el-button>
		</div>
		
		<div class="successpopup" v-if="formdata.issuccess">
			<div class="successpopupzh" @click="formdata.issuccess = false"></div>
			<div class="successpopup-block">
				<img class="successpopupimg" src="@/assets/newimage/successpopup.png" alt="成功" />
				<p class="successpopuptxt">Succeeded</p>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {loginmodel,homemodel} from '@/api/services/api'
	import {
		ElMessage,
		ElLoading,
		ElNotification
	} from 'element-plus'
	import { onMounted,ref } from 'vue';
	const store = useStore();
	const router = useRouter();
	const carouse = ref(null);
	let LoadingInstance = null;
	
	const formdata = reactive({
		timecount:0,
		key: '',
		iscount:false,
		issuccess :false,
		datas:{},
		apptxt:{},
		answerdata:[],
		userconfigdata:{},
		website:{}
	});
	const conttimefun = () =>{ // 倒计时
		let timecount = formdata.website.answerscore_time;
		let timer = setInterval(()=>{
			timecount--;
			if(timecount <= 0){
				formdata.timecount = 0;
				submitAnswerfun();
				clearInterval(timer)
			}else{
				formdata.timecount = timecount;
			}
		},1000)
	};
	const answerlistfun = () =>{  // 问题列表
		LoadingInstance = ElLoading.service({
			lock: true,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		homemodel.answerlist().then((res) => {
			LoadingInstance.close()
			if (res.code == 1) {
				formdata.answerdata = res.data.list;
				conttimefun();
			} else {
				ElNotification({
					message: res.msg,
					showClose: false,
					icon: 'Platform',
					customClass: 'notion_customClass',
					duration: 1000
				})
			}
		}).catch((err) => {
			LoadingInstance.close()
		})
	};
	const submitAnswerfun = () =>{  // 提交问题
		// LoadingInstance = ElLoading.service({
		// 	lock: true,
		// 	text: 'Loading',
		// 	background: 'rgba(0, 0, 0, 0.7)'
		// });
		homemodel.submitAnswerapi().then((res) => {
			// LoadingInstance.close()
			if (res.code == 1) {
				formdata.issuccess=true;
				carouse.value.next();
				setTimeout(()=>{
					formdata.issuccess=false;
				},5000);
				conttimefun()
			} else {
				ElNotification({
					message: res.msg,
					showClose: false,
					icon: 'Platform',
					customClass: 'notion_customClass',
					duration: 1000
				})
			}
		}).catch((err) => {
			LoadingInstance.close()
		})
	};
	// 
	const showcount = () =>{ // 开始
		let token = Boolean(localStorage.getItem('token'));
		if(!token){
			router.push('/login/login')
			return false
		};
		let usermsg = JSON.parse(localStorage.getItem('usermsg'));
		if(usermsg.is_key == 1){
			formdata.iscount = true;
			answerlistfun();
		}else{
			ElNotification({
				message: 'The card is not bound',
				showClose: false,
				icon: 'Platform',
				customClass: 'notion_customClass',
				duration: 1000
			})
		}
	};
	const bindcard = () =>{  // 绑定卡密
		let token = Boolean(localStorage.getItem('token'));
		if(!token){
			router.push('/login/login')
			return false
		};
		let sendData = {
			key:formdata.key
		};
		if(formdata.key == ''){
			ElNotification({
				message: 'Input error',
				showClose: false,
				icon: 'Platform',
				customClass: 'notion_customClass',
				duration: 1000
			})
			return false
		};
		LoadingInstance = ElLoading.service({
			lock: true,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		loginmodel.bindkey(sendData).then((res) => {
			// console.log(res)
			LoadingInstance.close()
			if (res.code == 1) {
				formdata.iscount = true;
				answerlistfun();
			} else {
				ElNotification({
					message: res.msg,
					showClose: false,
					icon: 'Platform',
					customClass: 'notion_customClass',
					duration: 1000
				})
			}
		}).catch((err) => {
			LoadingInstance.close()
		})
	};
	const initData = () =>{  // 首页数据
		LoadingInstance = ElLoading.service({
			lock: true,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		homemodel.homeindex().then((res) => {
			// console.log(res)
			LoadingInstance.close()
			if (res.code == 1) {
				formdata.datas = res.data;
				formdata.apptxt = res.data.app;
			} else {
				ElNotification({
					message: res.msg,
					showClose: false,
					icon: 'Platform',
					customClass: 'notion_customClass',
					duration: 1000
				})
			}
		}).catch((err) => {
			LoadingInstance.close()
		})
	};
	const userconfigfun = () => {
		LoadingInstance = ElLoading.service({
			lock: true,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		homemodel.userconfigapi().then((res) => {
			LoadingInstance.close()
			if (res.code == 1) {
				formdata.userconfigdata = res.data;
				formdata.website = res.data.website;
			} else {
				ElNotification({
					message: res.msg,
					showClose: false,
					icon: 'Platform',
					customClass: 'notion_customClass',
					duration: 1000
				})
			}
		}).catch((err) => {
			LoadingInstance.close()
		})
	};
	const gomy = () => {
		let token = Boolean(localStorage.getItem('token'));
		if(!token){
			router.push('/login/login')
			return false
		};
		router.push('/my/my')
	};
	onMounted(()=>{
		initData();
		userconfigfun();
	});
</script>

<style scoped lang="less">
	.contact {
		max-width: 1020px;
		padding-top: 40px;
		padding-bottom: 100px;
	}
	.welcome {
		width: 50%;
		margin: auto;
		text-align: center;
		line-height:30px;
		padding: 20px 0 14px;
		color: #333;
		font-size: 25px;
		font-weight: 800;
	}

	.welcometxt {
		width:90%;
		margin: auto;
		text-align: center;
		line-height:22px;
		padding: 20px 0 14px;
		color: #333;
		font-size: 15px;
		font-weight: 400;
	}
	.btn{
		margin-bottom: 15px;
		text-align: center;
		.btneachbtn{
			width: 290px;
			height: 45px;
			font-weight: 700;
		}
	}
	.cover{
		width: 90%;
		margin: auto;
		.covereach{
			width: 100%;
			margin-bottom: 20px;
			background-color: #fff;
			.covereachimg{
				width: 100%;
				height:260px;
				img{
					width: 100%;
					height:260px;
				}
			}
			.covereachtxt{
				padding:14px 0;
				.covereachtitle{
					width: 90%;
					color: #666666;
					font-size: 15px;
					line-height: 22px;
					font-weight: 700;
					margin-bottom:5px;
				}
				.covereachdoc{
					width: 90%;
					color: #666666;
					font-size: 15px;
					line-height: 22px;
					word-wrap: break-word;
				}
			}
		}
	}
	.from-each {
		width: 90%;
		margin: 0 auto;
	
		.from-eachtitle {
			font-size: 18px;
			color: #333333;
			font-weight: 700;
			line-height: 50px;
		}
	
		.from-eachinput {
			height: 50px;
			line-height: 50px;
			color: #333;
			font-size: 16px;
			background-color: #fff;
		}
	}
	
	// two
	.working{
		width: 90%;
		min-width:450px;
		height:416px;
		border-radius:15px;
		background-color: #fff;
		margin: 24px auto;
		.workingtop{
			position: relative;
			height:416px;
			.timeblock{
				position: absolute;
				top: 0;
				right: 0;
				z-index:10;
				width: 65px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				font-size:16px;
				color:#fff;
				border-top-right-radius:15px;
				border-bottom-left-radius: 15px;
				background-color:#2F75FF;
			}
			.workingbanner{
				width: 100%;
				height:416px;
				.workingimg{
					width: 100%;
					height: 207px;
					img{
						width: 100%;
						height: 207px;
						border-top-right-radius: 15px;
						border-top-left-radius: 15px;
					}
				}
				.workingbotom{
					width: 100%;
					// height: 209px;
					.workingbotom-title{
						width: 60%;
						margin: auto;
						text-align: center;
						line-height:30px;
						padding: 20px 0 14px;
						color: #333;
						font-size: 25px;
						font-weight:700;
					}
					.workingbotom-txt{
						width:90%;
						margin: auto;
						text-align: center;
						line-height:22px;
						padding: 20px 0 14px;
						color: #333;
						font-size: 15px;
						font-weight: 400;
					}
				}
			}
		}
	}
	.successpopup{
		position:fixed;
		left: 0;
		top: 0;
		z-index:50;
		width: 100vw;
		height: 100vh;
		.successpopupzh{
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: #999;
			opacity: .7;
		}
		.successpopup-block{
			position: absolute;
			left:50%;
			top: 50%;
			z-index: 80;
			width: 260px;
			height: 220px;
			margin-top: -110px;
			margin-left:-130px;
			.successpopupimg{
				width: 100%;
				height: 100%;
			}
			.successpopuptxt{
				position: absolute;
				width: 100%;
				text-align: center;
				bottom: 25px;
				color:#333333;
				font-size: 18px;
				font-weight: 700;
			}
		}
	}
</style>